<style>
/*订单显示*/
.item{ width:100px; height:165px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
.item .tags{width:20px;float:left;text-align:center;line-height:16px;}
.item .pic{width:80px; float:right;text-align:center;}
.item .pic img{max-width:80px; max-height:80px;border-radius:5px;}
.item .text{text-align:center;clear:both;}
.clear{clear:both;}
legend span{font-size:14px;}
.skustock{color:red;padding-top:8px;font-size:14px;}
</style>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">显示帐号</label>
		<div class="layui-input-block">
			{foreach $orderFrom as $k => $v}
			<input type="checkbox" lay-filter="so" title="{$v}" id="account{$k}" value="{$k}">
			{/foreach}
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">显示结点</label>
		<div class="layui-input-block">
			<input type="checkbox" lay-filter="sa" title="采购" id="caigou" value="caigou">
			<input type="checkbox" lay-filter="sa" title="裁床" id="caichuang" value="caichuang">
			<input type="checkbox" lay-filter="sa" title="车间" id="chejian" value="chejian">
			<input type="checkbox" lay-filter="sa" title="尾部" id="tail" value="tail">
		</div>
	</div>
</form>

<!-- 显示区 -->
<div id="listView"><img src="/static/mp/image/loading.gif"></div>
<div id="tailView"></div>

<script id="listTpl" type="text/html">
{{#  layui.each(d.factoryKV, function(fid, fname){ }}
<fieldset class="layui-elem-field layui-field-title">
	<legend>{{ fname }} <span class="factory-stat-{{ fid }}"></span></legend>
</fieldset>
<div class="layui-collapse" style="margin-bottom:25px;">

{{#  if (typeof(d.groupMap[fid]) != 'undefined'){ }}
	{{#  layui.each(d.groupMap[fid], function(gid, gname){ }}
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">{{ fname }} - {{ gname }}</h2>
		<div class="layui-colla-content layui-show">
			
			{{#  var k = fid.replace("f_", ""); }}
			{{#  var kk = gid.replace("g_", ""); }}
			{{#  var vv = d.list[k][kk]; }}

			<!-- 采购 -->
			{{#  if(vv.caigou_orders > 0){ }}
			<div class="layui-colla-item caigou {{# if (d.vals.indexOf('caigou') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">采购 - <span class="caigou-{{ k }}-{{ kk }}"></span></h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.caigou, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring order-account-{{ vvv.order_from }} {{# if (d.valsA.indexOf((vvv.order_from).toString()) == -1) { }} hide {{# } }}">
						<div class="tags">{{ vvv.tags }} {{#  if(vvv.sku_stock != ''){ }}<span title="{{ vvv.sku_stock }}" class="skustock"><strong>库</strong></span> {{# } }} </div>
						<div class="pic lay-pic-container" src="{{ vvv.pic }}"><img src="{{ vvv.pic }}" class="lay-pic" title="{{ vvv.client_status }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>{{ vvv.factory_outgo_name }}</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}

			<!-- 裁床 -->
			{{#  if(vv.caichuang_orders > 0){ }}
			<div class="layui-colla-item caichuang {{# if (d.vals.indexOf('caichuang') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">裁床 - <span class="caichuang-{{ k }}-{{ kk }}"></span></h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.caichuang, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring order-account-{{ vvv.order_from }} {{# if (d.valsA.indexOf((vvv.order_from).toString()) == -1) { }} hide {{# } }}">
						<div class="tags">{{ vvv.tags }} {{#  if(vvv.sku_stock != ''){ }}<span title="{{ vvv.sku_stock }}" class="skustock"><strong>库</strong></span> {{# } }} </div>
						<div class="pic lay-pic-container" src="{{ vvv.pic }}"><img src="{{ vvv.pic }}" class="lay-pic" title="{{ vvv.client_status }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>{{ vvv.factory_outgo_name }}</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}

			<!-- 车间 -->
			{{#  if(vv.chejian_orders > 0){ }}
			<div class="layui-colla-item chejian {{# if (d.vals.indexOf('chejian') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">车间 - <span class="chejian-{{ k }}-{{ kk }}"></span></h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.chejian, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring order-account-{{ vvv.order_from }} {{# if (d.valsA.indexOf((vvv.order_from).toString()) == -1) { }} hide {{# } }}">
						<div class="tags">{{ vvv.tags }} {{#  if(vvv.sku_stock != ''){ }}<span title="{{ vvv.sku_stock }}" class="skustock"><strong>库</strong></span> {{# } }}</div>
						<div class="pic lay-pic-container" src="{{ vvv.pic }}"><img src="{{ vvv.pic }}" class="lay-pic" title="{{ vvv.client_status }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>{{ vvv.factory_outgo_name }}</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}
				
		</div>
	</div>
	{{#  }); }}
{{#  } }}

</div>
{{#  }); }}
</script>

<script id="tailTpl" type="text/html">
<div class="layui-collapse" style="margin-bottom:25px;">
			
	<!-- 尾部 -->
	{{#  if(d.tail_orders > 0){ }}
		<div class="layui-colla-item tail {{# if (d.vals.indexOf('tail') == -1) { }} hide {{# } }}">
			<h2 class="layui-colla-title">尾部 - <span class="tail-all"></span></h2>
			<div class="layui-colla-content layui-show">
					
				{{#  layui.each(d.tail, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring order-account-{{ vvv.order_from }} {{# if (d.valsA.indexOf((vvv.order_from).toString()) == -1) { }} hide {{# } }}">
						<div class="tags">{{ vvv.tags }} {{#  if(vvv.sku_stock != ''){ }}<span title="{{ vvv.sku_stock }}" class="skustock"><strong>库</strong></span> {{# } }}</div>
						<div class="pic lay-pic-container" src="{{ vvv.pic }}"><img src="{{ vvv.pic }}" class="lay-pic" title="{{ vvv.client_status }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>{{ vvv.factory_outgo_name }}</div>
					</div>
				{{#  }); }}

				<div class="clear"></div>
			</div>
		</div>
	{{#  } }}

</div>
</script>

<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script>
	layui.use([ 'element', 'layer', 'form', 'cookie', 'laytpl', 'tool'], function() {
		var element = layui.element;
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var laytpl = layui.laytpl;
		var oRes = {};	// 接口返回数据
		
		// 默认选择帐号
		var checkedAccount = $.cookie('index-show-account');
		var valsA = checkedAccount ? checkedAccount.split(',') : [];
		for (var i in valsA) {
			$("#account"+valsA[i]).prop("checked", true);
		}
		console.log('indexAccountCache:'+valsA.join(','));
		
		// 默认选择结点
		var checked = $.cookie('index-show-area');
		var vals = checked ? checked.split(',') : [];
		for (var i in vals) {
			$("#"+vals[i]).prop("checked", true);
		}
		console.log('indexCache:'+vals.join(','));
		
		form.render();
		element.init();
        
		// 工厂和环节的统计
		window.statFee = function() {
			if (typeof(oRes.list) == 'undefined') {
				return;
			}
			var list = oRes.list;
			var factoryKV = oRes.factoryKV;
			var stepArr = {'caigou':'采购', 'caichuang':'裁床', 'chejian':'车间'};
			
			for(var i in factoryKV) {
				var iArr = i.split('_');
				var fid = iArr[1];
				
				if (typeof(list[fid]) == 'undefined') {
					$('.factory-stat-'+fid).html('');
				} else {
					// 初始化工厂统计数据start
					var statOrders = [];
					var statItems = [];
					var statCost = [];
					for (var step in stepArr) {
						statOrders[step] = 0;
						statItems[step] = 0;
						statCost[step] = 0;
					}
					// 初始化工厂统计数据end
					
					for(var gid in list[fid]) {	// 遍历分组
						
						for(var step in stepArr) {	// 遍历环节
							if (vals.indexOf(step) >= 0 && typeof(list[fid][gid][step]) != 'undefined') {
								// 初始化环节统计数据start
								var stepOrders = 0;
								var	stepItems = 0;
								var	stepCost = 0;
								var	stepChewei = 0;
								var	stepSixian = 0;
								var	stepZhuanji = 0;
								// 初始化环节统计数据end
								
								for(var j in list[fid][gid][step]) {	// 遍历订单
									if(valsA.indexOf((list[fid][gid][step][j]['order_from']).toString()) >= 0) {
										statOrders[step]++;
										statItems[step] += parseInt(list[fid][gid][step][j]['quantity']);
										statCost[step] += parseFloat(list[fid][gid][step][j]['cost']);
										
										stepOrders++;
										stepItems += parseInt(statItems+list[fid][gid][step][j]['quantity']);
										stepCost += parseFloat(statItems+list[fid][gid][step][j]['cost']);
										stepChewei += parseFloat(statItems+list[fid][gid][step][j]['chewei_price']);
										stepSixian += parseFloat(statItems+list[fid][gid][step][j]['sixian_price']);
										stepZhuanji += parseFloat(statItems+list[fid][gid][step][j]['zhuanji_price']);
									}
								}
								
								// 更新环节的统计
								$('.'+step+'-'+fid+'-'+gid).html(stepOrders+'单-'+stepItems+'件【加工费：'+layui.tool.parseFloat(stepCost)+'元，车位费：'+layui.tool.parseFloat(stepChewei)+'元，打边费：'+layui.tool.parseFloat(stepSixian)+'元，冚车费：'+layui.tool.parseFloat(stepZhuanji)+'元】');
							}
						}
						
					}
					
					// 更新工厂的统计
					var statHtml = '';
					if (vals.indexOf('caigou') >= 0) {
						statHtml += '【采购：'+statOrders['caigou']+'单 / '+statItems['caigou']+'件 / '+layui.tool.parseFloat(statCost['caigou'])+'元】';
					}
					if (vals.indexOf('caichuang') >= 0) {
						statHtml += '【裁床：'+statOrders['caichuang']+'单 / '+statItems['caichuang']+'件 / '+layui.tool.parseFloat(statCost['caichuang'])+'元】';
					}
					if (vals.indexOf('chejian') >= 0) {
						statHtml += '【车间：'+statOrders['chejian']+'单 / '+statItems['chejian']+'件 / '+layui.tool.parseFloat(statCost['chejian'])+'元】';
					}
					$('.factory-stat-f_'+fid).html(statHtml);
				}
				
			}
			
			// 尾部统计单独处理
			var tail = oRes.tail;
			// 初始化环节统计数据start
			var stepOrders = 0;
			var	stepItems = 0;
			var	stepCost = 0;
			var	stepChewei = 0;
			var	stepSixian = 0;
			var	stepZhuanji = 0;
			// 初始化环节统计数据end
			for(var n in tail) {	// 遍历订单
				if(valsA.indexOf((tail[n]['order_from']).toString()) >= 0) {
					stepOrders++;
					stepItems += parseInt(tail[n]['quantity']);
					stepCost += parseFloat(tail[n]['cost']);
					stepChewei += parseFloat(tail[n]['chewei_price']);
					stepSixian += parseFloat(tail[n]['sixian_price']);
					stepZhuanji += parseFloat(tail[n]['zhuanji_price']);
				}
			}
			// 更新环节的统计
			$('.tail-all').html(stepOrders+'单-'+stepItems+'件【加工费：'+layui.tool.parseFloat(stepCost)+'元，车位费：'+layui.tool.parseFloat(stepChewei)+'元，打边费：'+layui.tool.parseFloat(stepSixian)+'元，冚车费：'+layui.tool.parseFloat(stepZhuanji)+'元】');
		};
		
		
     	// 控制显示/隐藏指定帐号订单
		form.on('checkbox(so)', function(data) {
			var account = data.value;
			if (data.elem.checked && valsA.indexOf(account.toString()) == -1) {
				valsA.push(account);
				$('.order-account-'+account).show();
			} else {
				valsA.pop(account);
				$('.order-account-'+account).hide();
			}
			// console.log(valsA.join(','));
			
			// 重新统计工厂和环节的数据
			statFee();
				
			$.cookie('index-show-account', valsA.join(','), {
				expires : 90
			});
		});
        
     	// 控制显示/隐藏区块
		form.on('checkbox(sa)', function(data) {
			if (data.elem.checked && vals.indexOf(data.value) == -1) {
				vals.push(data.value);
				$(".layui-collapse ."+data.value).show();
			} else {
				vals.pop(data.value);
				$(".layui-collapse ."+data.value).hide();
			}
			// console.log(vals.join(','));
			
			// 重新统计工厂和环节的数据
			statFee();	
				
			$.cookie('index-show-area', vals.join(','), {
				expires : 90
			});
		});
        
     	// 获取首页订单
		getIndexOrders();
		function getIndexOrders(){
			$.ajax({
			   type: "POST",
			   url: "{:url('system/index/index')}",
			   data: "",
			   dataType:"json",
			   success: function(res){
				   var listTpl = $('#listTpl').html();
				   var tailTpl = $('#tailTpl').html();
				   res.data.vals = vals;
				   res.data.valsA = valsA;
				   oRes = res.data;
				   laytpl(listTpl).render(res.data, function(html){
				   		$('#listView').html(html);
				   });
				   laytpl(tailTpl).render(res.data, function(html){
				   		$('#tailView').html(html);
				   });
				   
				   // 重新统计工厂和环节的数据
				   statFee();
					
				   element.init();
			   }
			});
		}
		
	});
</script>